<template>
  <div class="home">
    <div ref="mescroll" class="mescroll">
      <swiper :options="bannerHome" v-if="bannerList && bannerList.length > 0">
        <swiper-slide class="swiper-demo-img" v-for="(item, index) in bannerList" :key="index"><img :src="item.ad_code"></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="exam">
        <div class="top">
          <img src="@/assets/shouyeb1.png" alt="">
          <span>专业天赋检测</span>
          <img src="@/assets/shouyeb1.png" alt="">
        </div>
        <div class="item clear">
          <img @click="router({path: 'talent'})" src="@/assets/shouyeb2.png" alt="">
          <img @click="examClick" src="@/assets/shouyeb3.png" alt="">
          <img @click="show = !show" src="@/assets/shouyeb4.png" alt="">
        </div>
      </div>
      <div class="section">
        <div class="top clear">
          <span class="title">魔方精灵</span>
          <span class="tip">自主研发课程</span>
          <span class="more" @click="router({path: 'classify', query: {columId: 1}})">查看更多 <img class="arrow" src="@/assets/xuanzedingzhi02.png" alt=""></span>
        </div>
        <div class="flex mofang clear">
          <img @click="router({path: 'courseList'})" src="@/assets/zhihuibao05.png" alt="">
          <img src="@/assets/zhihuibao06.png" alt="">
          <img src="@/assets/zhihuibao07.png" alt="">
        </div>
      </div>
      <div class="section">
        <div class="top clear">
          <span class="title">学霸学吧</span>
          <span class="tip">满分学霸必经之路</span>
          <span class="more" @click="router({path: 'classify', query: {columId: 2}})">查看更多 <img class="arrow" src="@/assets/xuanzedingzhi02.png" alt=""></span>
        </div>
        <div class="xuba clear">
          <div class="item" @click="router({path: 'courseList'})">
            <img src="@/assets/zhihuibao08.png" alt="">
          </div>
          <div class="item">
            <img src="@/assets/zhihuibao08.png" alt="">
          </div>  
          <div class="item">
            <img src="@/assets/zhihuibao08.png" alt="">
          </div>  
          <div class="item">
            <img src="@/assets/zhihuibao08.png" alt="">
          </div>      
        </div>
      </div>
      <swiper :options="bannerOption" class="swiper-ad">
        <swiper-slide class="swiper-ad-img" v-for="(item, index) in 5" :key="index"><img src="@/assets/zhihuibao09.png"></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="section border-none">
        <div class="top clear">
          <span class="title">社交达人</span>
          <span class="tip">教会你为人处事</span>
          <span class="more" @click="router({path: 'classify', query: {columId: 3}})">查看更多 <img class="arrow" src="@/assets/xuanzedingzhi02.png" alt=""></span>
        </div>
        <div class="shejiao clear">
          <div class="item" @click="router({path: 'courseList'})">
            <img src="@/assets/zhihuibao12.png" alt="">
            <div class="con">
              <p class="title">夫妻和谐</p>
              <p class="tip">专业导师1V1服务</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/zhihuibao13.png" alt="">
            <div class="con">
              <p class="title">亲子关系</p>
              <p class="tip">建立和谐亲子关系</p>
            </div>
          </div>  
          <div class="item">
            <img src="@/assets/zhihuibao14.png" alt="">
            <div class="con">
              <p class="title">同事关系</p>
              <p class="tip">如何正确对待职场对待职场...</p>
            </div>
          </div>  
          <div class="item">
            <img src="@/assets/zhihuibao15.png" alt="">
            <div class="con">
              <p class="title">自我调适</p>
              <p class="tip">改变心理状态性质</p>
            </div>
          </div>      
        </div>
      </div>
      <div class="section">
        <div class="top clear">
          <span class="title">天赋少年</span>
          <span class="tip">学而思爱智康</span>
        </div>
        <news-list></news-list>
      </div>
    </div>
    <alert-box :alert-message = "alert"  v-if="alert"></alert-box>
    <div v-transfer-dom class="home-dialog">
      <popup v-model="show" @click="show = false">
        <div class="popup0">
          <div class="title">选择密钥 <p class="explain"><img src="@/assets/shaoerertongxuanzemishitanchuang01.png" alt=""> 使用说明</p></div>
          <div class="list">
            <div class="item" @click="keyCheckFn(1)">
              <span>VIP会员密钥/大儿子（剩余5次）</span>
              <img v-if="(key_check == 1)" src="@/assets/shaoerertongxuanzemishitanchuang02.png" alt="">
            </div>
            <div class="item" @click="keyCheckFn(2)">
              <span>增量密钥/密钥2（剩余5次）</span>
              <img v-if="(key_check == 2)" src="@/assets/shaoerertongxuanzemishitanchuang02.png" alt="">
            </div>
          </div>
          <span class="btn" @click="confirm">确认选择</span>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>

import { TransferDom, Popup } from 'vux'
import newsList from '@/components/newsList'
import alertBox from '@/components/alertBox'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
// import MescrollVue from 'mescroll.js/mescroll.vue'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { home } from '@/api/api'

export default {
  directives: {
    TransferDom
  },
  components: {
    swiper,
    swiperSlide,
    newsList,
    alertBox,
    Popup,
  },
  data () {
    return {
      bannerHome: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      bannerOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        loop: true,
        observer:true,
        observeParents:true,
      },
      mescroll: null,
      dataList: [],
      alert: '',
      show: false,
      key_check: 0,
      // banner图
      bannerList: [],
    }
  },
  created () {
    this.getHome()
  },
  mounted () {
    this.alert = {
      title: '提示',
      tip: '您还没开通定制计划方案，暂不能测试',
      btn: '去开通',
      path: {path: '/customized'},
      is_show: false
    }
    this.mescroll = new MeScroll(this.$refs.mescroll, {// 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
      down: {
        auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
      },
      up: {
        auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
      }
    })
  },
  beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      if (vm.mescroll) {
        // 恢复到之前设置的isBounce状态
        if (vm.mescroll.lastBounce != null) vm.mescroll.setBounce(vm.mescroll.lastBounce)
      }
    })
  },
  beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
    if (this.mescroll) {
      this.mescroll.lastBounce = this.mescroll.optUp.isBounce// 记录当前是否禁止ios回弹
      this.mescroll.setBounce(true) // 允许bounce
    }
    next()
  },
  methods: {

    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback (page) {
      // 联网加载数据
      this.getListDataFromNet(page.num, page.size, (curPageData) => {
        // 添加列表数据
        this.newArr = this.newArr.concat(curPageData)
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(curPageData.length)
        })
      }, () => {
        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        this.mescroll.endErr()
      })
    },

    /* 联网加载列表数据
     在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
     请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
     实际项目以您服务器接口返回的数据为准,无需本地处理分页.
    * */
    getListDataFromNet (pageNum, pageSize, successCallback, errorCallback) {
      // 延时一秒,模拟联网
      setTimeout(function () {
        try {
          if (pageNum === 0) {
            // 此处模拟下拉刷新返回的数据
            var id = new Date().getTime()
            var newObj = {title: '【新增新闻】 标题' + id, content: '新增新闻的内容', id: id}
            successCallback && successCallback(newObj)
          } else {
            // 此处模拟上拉加载返回的数据
            var newArr = []
            for (var i = 0; i < pageSize; i++) {
              var upIndex = (pageNum - 1) * pageSize + i + 1
              newArr.push({title: '【新闻' + upIndex + '】 标题标题标题标题标题标题', content: '内容内容内容内容内容内容内容内容内容内容', id: upIndex})
            }
            successCallback && successCallback(newArr)
          }
        } catch (e) {
          // 联网失败的回调
          errorCallback && errorCallback()
        }
      }, 1000)
    },
    examClick () {
      this.alert.is_show = true
    },
    router (path) {
      this.$router.push(path)
    },
    confirm () {
      this.show = !this.show
      this.alert = {
        title: '提示',
        tip: '该密钥只能用于（少年）测试',
        btn: '确定',
        path: {path: '/talent'},
        is_show: true
      }
    },
    keyCheckFn (index) {
      this.key_check = index
    },
    getHome () {
      home().then((res) => {
        console.log(res)
        this.bannerList = res.data.data.banner
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .home
    max-width 100vw
    min-height 100vh3
    overflow hidden
    padding-bottom 6rem
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
      background-color #fff
      .swiper-demo-img
        padding 1rem 1.5rem
        box-sizing border-box
      .swiper-ad-img
        padding 0
      .exam
        padding-top 2rem
        padding-bottom .5rem
        .top
          text-align center
          img
            display inline-block
            vertical-align middle
            width 3.7rem
          span
            font-size 1.5rem
            line-height 1.5rem
            height 1.5rem
            color #333
            font-weight 500
            vertical-align middle
            display inline-block
            margin 0 .5rem
        .item
          margin-top 2rem
          img
            float left
            width 33.3%
      .section
        padding 0 1.5rem
        border-top 1px solid #E6E6E6
        padding-bottom .5rem
        .top
          padding-top 3rem
          padding-bottom 2rem
          .title
            color #333
            font-size 1.8rem
            line-height 1.8rem
            font-weight bold
          .tip
            font-size 1.3rem
            color #999
            margin-left 1rem
            line-height 1.3rem
          .more
            color #999
            font-size 1.3rem
            line-height 1.8rem
            float right
            position relative
            padding-right 1rem
            .arrow
              width .6rem
              position absolute
              right 0
              top .3rem
        .mofang
          img
            float: left
            width calc(33.3% - .8rem)
            &:nth-child(2)
              margin 0 1.2rem
        .xuba
          .item
            float left
            width calc(50% - .75rem)
            border-radius .3rem
            overflow hidden
            position relative
            margin-bottom 1.5rem
            &:nth-child(2n+1)
              margin-right 1.5rem
        .shejiao
          .item
            float left
            width calc(50% - .5rem)
            margin-bottom 1rem
            position relative
            &:nth-child(2n+1)
              margin-right 1rem
            .con
              position absolute
              top 0
              padding-left 1.7rem
              padding-top 1.7rem
              .title
                font-size 1.7rem
                height 1.7rem
                line-height 1.7rem
                font-weight 800
              .tip
                font-size 1.2rem
                line-height 1.2rem
                height 1.2rem
                color #999
                margin-top 1.2rem
                width calc(100vw - 26rem)
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
      .border-none
        border none
  .popup0
    .title
      font-size 1.7rem
      text-align center
      line-height 5rem
      position relative
      color #333
      .explain
        position absolute
        right 1.7rem
        top 0
        font-size 1.5rem
        padding-left 2.2rem
        img
          position absolute
          left 0
          top 1.75rem
          width 1.5rem
    .list
      height 30rem
      overflow auto
      .item
        line-height 5rem
        height 5rem
        font-size 1.5rem
        color #333
        position relative
        margin-left 1.5rem
        border-bottom 1px solid #e6e6e6
        img
          position absolute
          width 2rem
          right 1.5rem
          top 1.5rem
    .btn
      margin .8rem 1.5rem
      background-color #172F6D
      height 4rem
      line-height 4rem
      display block
      text-align center
      font-size 1.5rem
      color #fff
      border-radius 100px
      position absolute
      bottom 0
      width calc(100% - 3rem)
      &::after
        content ''
        width calc(100% + 3rem)
        position absolute
        left -1.5rem
        top -.8rem
        height 1px
        background-color #e6e6e6
</style>